.course-listing-wrapper {
  background-color: $colorBeige;
  min-height: 100%;
}

.filter {
  &-wrapper {
    position: relative;
    z-index: zindex($zLayout, tabBar);
    width: 100%;
  }

  &-bar {
    $filter-button-padding: 16px;
    padding: 0 ($margin - $filter-button-padding);
    position: sticky;
    display: flex;
    justify-content: flex-end;
    background-color: $colorLightBeige;
    .filter-button {
      display: relative;
      padding: 0 $filter-button-padding;
      margin: 0;
      height: 100%;
    }
    .filter-icon {
      @include size(16px, 16px);
    }
    .active-filter {
      @include size(5px, 5px);
      position: absolute;
      border-radius: 50%;
      top: 10px;
      right: 10px;
      background-color: $colorSavoir;
    }
  }
}

.course-content {
  display: flex;
  overflow: hidden;
}

.course-listing {
  $scrollarea-width: 92px;
  $scrollarea-padd-left: 15px;
  $scrollarea-padd-right: 10px;

  @include size($scrollarea-width, 100%);
  overflow-y: auto;
  @include hide-scrollbar;

  &--card {
    position: relative;
    height: 54px;
    padding: 0 $scrollarea-padd-right 0 $scrollarea-padd-left;
    display: flex;
    align-items: center;
    background-color: $colorLightBeige;
    color: $colorGrey;

    &-title {
      @include truncate();
      font-family: $notoSans;
      max-height: 30px;
      font-size: 11px;
      line-height: 14px;
    }

    &.active {
      background-color: $colorBeige;
      color: $colorDark;
    }

    &::after {
      content: "";
      position: absolute;
      width: $scrollarea-width - $scrollarea-padd-left - $scrollarea-padd-right;
      height: 1px;
      left: $scrollarea-padd-left;
      bottom: 0;
      background-color: $colorBeige;
    }
  }

  &--course-highlight {
    @include size(5px, 100%);
    position: absolute;
    left: 0;
  }
}

.course-card-area {
  @include size(283px, 100%);
  padding: 13px 15px 13px 12px;

  .course-card-wrapper {
    height: 100%;
  }
}

.course-filter {
  z-index: zindex($zLayout, tabBar);
  z-index: 4;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;
  &.visible {
    display: inherit;
  }
}

.no-filter-results {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
